<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>仓库管理系统</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Bootstrap -->
        <link rel="stylesheet" media="screen" href="css/bootstrap.min.css" />
        <link rel="stylesheet" media="screen" href="css/bootstrap-theme.min.css" />

        <!-- Bootstrap Admin Theme -->
        <link rel="stylesheet" media="screen" href="css/bootstrap-admin-theme.css" />
        <link rel="stylesheet" media="screen" href="css/bootstrap-admin-theme-change-size.css" />

        <!-- Vendors -->
        <link rel="stylesheet" media="screen" href="vendors/datatables/css/dataTables.bootstrap.min.css" />
        <link rel="stylesheet" media="screen" href="vendors/spectrum/spectrum.css" />
        <!-- (...) -->
        <style type="text/css">
        .bootstrap-admin-panel-content .btn-toolbar {
            margin-bottom: 5px;
        }
        .userdlg {
            overflow: hidden;;
        }
        .userdlg legend {
            padding: 5px;
        }
        .userdlg-btns {        
            padding-left: 10px;
            margin: 10px 0 20px;
        }
        .userdlg-btns button {
            width: 75px;
        }        
		table.dataTable tbody  tr.selected  td {
		    background-color: #B0BED9;
		}		
		.icon {
		  width: 16px;
		  height: 16px;
		  border: 1px solid black;
		}
        </style>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
           <script type="text/javascript" src="js/html5shiv.js"></script>
           <script type="text/javascript" src="js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="bootstrap-admin-with-small-navbar">        
        <th:block th:include="template :: header"/>
        
        <div class="container">
            <!-- left, vertical navbar & content -->
            <div class="row">
                <!-- left, vertical navbar -->
                <div class="col-md-2 bootstrap-admin-col-left" th:include="template :: leftnav (current=racks)">
                </div>

                <!-- content -->
                <div class="col-md-10">
                    
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">                        
                                <div class="panel-heading">
                                    <div class="text-muted bootstrap-admin-box-title">货架列表</div>
                                </div>
                                <div class="bootstrap-admin-panel-content">
                                    <div class="btn-toolbar">
                                    <button id="btnAdd" class="btn btn-default" type="button">添加新货架</button>
                                    <button id="btnEdit" class="btn btn-default" type="button">修改货架</button>
                                    <button id="btnDel" class="btn btn-default" type="button">删除货架</button>
                                    </div>
                                    <table class="table table-striped table-bordered" id="racks">
                                        <thead>
                                            <tr>
                                                <th>编号</th>
                                                <th>显示颜色</th>
                                                <th>货架层数</th>
                                                <th>每层个数</th>
                                                <th>货架序号</th>
                                                <th>备注</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- footer -->
        <div th:include="template :: footer"></div>
        
        <!-- 新建货架 -->
        <div id="creatediv" class="userdlg"  style="display: none;">
            <form class="form-horizontal" >
              <fieldset>
                  <legend>新建货架</legend>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_id">编号</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_id" name="id" type="text"  placeholder="编号"/>
                      </div>
                  </div>              
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_color">显示颜色</label>
                      <div class="col-sm-6">
                          <input class="form-control colorpicker" id="add_color" name="color" type="text"  value="#000"/>
                      </div>
                  </div>   
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_layers">货架层数</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_layers" name="layers" type="text"  value="3" placeholder="货架层数"/>
                      </div>
                  </div>                  
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_cols">每层个数</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_cols" name="cols" type="text"  value="3" placeholder="每层个数"/>
                      </div>
                  </div>            
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_index">货架序号</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_index" name="index" type="text"  value="1" placeholder="序号"/>
                      </div>
                  </div>      
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="add_note">备注</label>
                      <div class="col-sm-6">
                          <textarea class="form-control" id="add_note" name="note"  rows="3" placeholder="备注"></textarea>
                      </div>
                  </div>
                  <div class="userdlg-btns">
	                  <button type="button" class="btn btn-primary">确定</button>
	                  <button type="reset" class="btn btn-default">取消</button>
	              </div>
              </fieldset>
          </form>        
        </div>

        <!-- 修改货架 -->
        <div id="editdiv"  class="userdlg" style="display: none;">
            <form class="form-horizontal" >
              <fieldset>
                  <legend>修改货架</legend>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" >编号</label>
                      <div class="col-sm-6">
                            <p id="edit_id" class="form-control-static"></p>                      
                      </div>
                  </div>          
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="edit_color">显示颜色</label>
                      <div class="col-sm-6">
                          <input class="form-control colorpicker" id="edit_color" name="color" type="text" />
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="edit_layers">货架层数</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="edit_layers" name="layers" type="text"  placeholder="货架层数"/>
                      </div>
                  </div>                  
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="edit_cols">每层个数</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="edit_cols" name="cols" type="text"  placeholder="每层个数"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="edit_index">货架序号</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="edit_index" name="index" type="text"  value="1" placeholder="序号"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-3 control-label" for="edit_note">备注</label>
                      <div class="col-sm-6">
                          <textarea class="form-control" id="edit_note" name="note" rows="3"  placeholder="备注"></textarea>
                      </div>
                  </div>
                  <div class="userdlg-btns">
	                  <button type="button" class="btn btn-primary">确定</button>
	                  <button type="reset" class="btn btn-default">取消</button>
                  </div>
              </fieldset>
          </form>        
        </div>
                
<!--         <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> -->
        <script type="text/javascript" src="vendors/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="vendors/jquery-ajax-mvc-patch.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/twitter-bootstrap-hover-dropdown.min.js"></script>
        <script type="text/javascript" src="vendors/datatables/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="vendors/datatables/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="vendors/jquery-dateFormat.min.js"></script>
		<script type="text/javascript" src="vendors/spectrum/spectrum.js"></script>
        <script type="text/javascript" src="vendors/spectrum/jquery.spectrum-zh-cn.js"></script>
        <script type="text/javascript" src="vendors/layer/layer.js"></script>
        <script type="text/javascript" src="vendors/jquery.validate.js"></script>
        <script type="text/javascript" src="js/app/tools.js"></script>
        <script type="text/javascript" src="js/app/racks.js"></script>
    </body>
</html>
